
.t(@num){top:@num}
.r(@num){right:@num}
.b(@num){bottom:@num}
.l(@num){left:@num}
/*宽高*/
.w(@width){width:@width}
.h(@height){height:@height}
/*外边距*/
.m(@value){margin:@value}
.mt(@value){margin-top: @value}
.mb(@vlaue){margin-bottom: @vlaue}
.ml(@value){margin-left: @value}
.mr(@value){margin-right: @value}
/*内边距*/
.p(@value){padding:@value}
.pt(@value){padding-top: @value}
.pb(@vlaue){padding-bottom: @vlaue}
.pl(@value){padding-left: @value}
.pr(@value){padding-right: @value}
/*边框*/
.bo(@color){border:@color}
.b_r(@brrvalue){border-radius: @brrvalue}
.bo_t(@btVal){border-top: @btVal}
.bo_r(@brVal){border-right: @brVal}
.bo_b(@bbVal){border-bottom: @bbVal}
.bo_l(@blVal){border-left: @blVal}
/*字体*/
.fs(@val:.12rem){font-size: @val}
.fw(@val:bold){font-weight: @val}
.c(@color){color: @color}
.lh(@h){line-height: @h;}
.ta(@v){text-align: @v}
/*背景*/
.bc(@color){background-color:@color}
.bi(@url){background-image:@url}
.bsc{background-size: contain}
/*CSS3*/
.transition(@time:0.3s,@effect:ease-in-out){
    transition: All @time @effect;
    -webkit-transition: All @time @effect; 
    -moz-transition: All @time @effect; 
    -o-transition: All @time @effect;
}
.transform_scale(@value:1.2){
    transform: scale(@value,@value);
    -webkit-transform: scale(@value,@value);
    -moz-transform: scale(@value,@value);
    -o-transform: scale(@value,@value);
    -ms-transform: scale(@value,@value)
}
.transform_rotate180{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}
/*多出部分用省略号表示 用于一行*/
.wes(@wid){overflow:hidden;word-wrap:normal;white-space:nowrap;text-overflow:ellipsis;width: @wid}

/*input btn common style*/
.on{outline: none}
//变量
@100:100%; 
@l:left; 
@r:right; 
@c:center;
@color:#337AB7;
